Windows下Ionic 开发环境搭建

Ionic 介绍

首先,Ionic 是什么。

Ionic 是一款基于 Cordova 及 Angular 开发 Hybrid/Web APP 的前端框架,类似的其他框架有:Intel XDK等。

简单来说就是可以将你的 Web 应用打包发布成 IOS/Android APP,并且提供了 Cordova 之外很多强大的服务和新的特性。

听起来还是很诱人的,事实上这也是目前最火的一种 Hybrid APP 开发方式。

接下来介绍如何在 Windows 下搭建 Ionic 开发环境。

在开始之前我假设你已经了解了如下概念:

  • Java JDK
  • Apache Ant
  • Android SDK
  • NodeJS

以上名词这里就不赘述,如果有不清楚的可以自行查阅

安装步骤

Ionic 官方教程:http://learn.ionicframework.com/videos/windows-android/

以下内容参考官方教程得出:

下载 JDK 并配置好 Java 运行环境

下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html(请注意选择您电脑的对应版本)

Java 环境变量的配置:参看:http://zhidao.baidu.com/question/1366931535221381339.html

下载 Apache Ant 并将其 bin 目录路径添加进 Path 路径

下载地址:http://mirror.tcpdiag.net/apache//ant/binaries/apache-ant-1.9.4-bin.zip

下载完成后解压该文件至某个安全的目录下,然后将改文件夹内的bin文件夹路径添加至系统 Path 环境变量中,如存放在 C 盘 Program Files 目录下则 Path 中添加如下值 C:\Program Files\apache-ant-1.9.4\bin;(添加方法和 java 配置 path 变量是一样的,注意以;隔开每个环境变量的值)

下载 Android SDK 并配置好 SDK 运行环境

下载地址:http://developer.android.com/sdk/index.html

这里可以只下载 Android SDK 不需要一并下载 Android Studio。

下载完成并安装然后向系统Path环境变量中添加两个值。分别是 Android SDK 中 tools 目录的路径和 platform-tools 的路径。例如:

  • C:\Program Files (x86)\Android\android-sdk\tools;
  • C:\Program Files (x86)\Android\android-sdk\platform-tools;

在这里我发现 Android SDK 安装目录中并没有platform-tools这个文件夹,运行 tools 目录下的 android.bat 文件,然后在出现的界面中勾选 Android SDK Platform-tools 然后安装。

注意:这里我下载的纯净版 SDK 之前并没有任何 Android 系统在内,所以同 Platform-tools 一样需要在这里勾选需要的版本然后安装。这里至少需要有一个系统,否则无法创建虚拟机。当然,用真机调试的话可以不依赖。

配置 Gradle

下载地址:http://services.gradle.org/distributions/

下载相应版本的 gradle(对应 cordova-android),然后解压放置在某个目录下,然后向系统 Path 环境变量中添加:

  • D:\Program Files\gradle\gradle-3.3\bin

下载 Nodejs for Windows 并安装

下载地址:https://nodejs.org/download/

Windows 下安装 Nodejs 环境很简单,在 Nodejs 官网下载正确版本后安装即可。

nmp 安装 Ionic 和 Cordova

完成以上几步需要配置的环境就搭建完成了,接下来就只需要在控制台输入简单的几行命令就可以安装 Ionic 和 Cordova 啦。

进入 cmd 窗口,输入如下指令:

npm install -g cordova ionic

完成以上所有步骤,就可以开始利用 Ionic 快速开发 Android APP 啦

创建并运行 ionic app

创建 APP

进入 cmd 窗口,输入如下指令:

ionic start myapp

这里的 myapp 是你的 APP 的名字

进入创建的 APP 目录

cd myapp

选择配置 Android 环境

ionic platform add android

打包生成 APP

ionic build android

运行 APP

需要先新建虚拟机或者连接手机。

  • 新建虚拟机:打开 Android SDK 安装目录下的 AVD Manager.exe 选择新建
  • 连接手机:直接通过数据线连接真实设备

ionic run android

到这一步系统就会打开虚拟机或者在真实设备运行简单的示例 APP 了。

其它

–prod 的作用

在编译命令的最后加上 –prod 会让 app 的启动速度加快,但构建速度会变慢。

ionic build android --release --prod

无论是 debug 版本还是 release 版本都适用。

APP 签名

生成签名文件

生成签名文件需要用到 keytool.exe (位于 jdk1.6.0_24\jre\bin 目录下),使用产生的 key 对 apk 签名用到的是 jarsigner.exe (位于 jdk1.6.0_24\bin 目录下),把上两个软件所在的目录添加到环境变量path后,即可使用生成签名文件的命令:

1
keytool -genkey -v -keystore demo.jks -alias demo -keyalg RSA -keysize 2048 -validity 10000
  • -genkey:产生密钥

  • -keystore: 签名文件名称(这里是 demo.jksdemo 可以自定义,jks 是 Android studio 生成的签名文件的后缀)

  • -alias:签名文件的别名(这里是 demo,可自定义)

  • -keyalg:使用 RSA 算法对签名加密(默认 RSA )

  • -validity 有效期限(这里是 10000 天,可自定义)

以上命令在 cmd 运行如下:

自动签名

在工程目录 /platforms/android 目录新建名为 release-signing.properties 的文件,文件内容如下:

1
2
3
4
storeFile=demo.jks
keyAlias=demo
storePassword=输入的密钥库口令
keyPassword=输入的密钥口令

这样,使用 ionic build android --release编译即可,在 /platforms/android/build/outputs/apk 下就会生成已签名的安装包 android-release.apk

在 windows 下 storeFile 文件路径应使用 Unix 下的目录分隔符 / 。

了解更多可进入 Ionic 官网: http://ionicframework.com/ 进行拓展阅读。